Faire une section avec un fond coloré

afficher un écran d'accueil temporaire

Voici comment afficher un écran d'accueil (par exemple pour vos sites en constructions). Ajoutez le code suivant dans la partie "Paramètres du site > Code javascript (avancé)

const message = `En construction... Revenez très prochainement !`;
const textColor = '#2b2b2b';

window.onload=()=> { document.body.innerHTML=`<p style="height:100%;width:100%;background:white;display:flex;justify-content:center;align-items:center;color:${textColor};font-size:clamp(22px,4vw,60px);font-weight:700;padding:50px;text-align:center;flex-direction: column;">${document.title}<i>${message}</i></p>`;};if(document.…

Ajouter vos réseaux sociaux dans le menu

Ajoutez le code suivant dans la partie "Paramètres du site > Code javascript (avancé)

Il vous suffira de retirer ou remplir les variables du début pour les afficher / masquer.

const rss= 'https://monsite/feed.xml'
const twitch= 'https://www.twitch.tv/...'
const linkedin = 'https://www.linkedin.com/...'
const mastodon= 'https://...'
const bluesky= 'https://bsky.app/profile/...'
const discord = 'https://...'
const youtube = 'https://youtube.com/...'
const facebook = 'https://facebook.com/...'
const instagram= 'https://instagram.com/...'

window.addEventListener("load",(event) => {
	setTimeout(()=…

Faire une section avec un fond coloré

Insérez le code suivant dans les styles de vos vignettes.

overflow:visible!important;
will-change:unset!important;
animation:none!important;
backdrop-filter:none!important;
opacity:1!important;
&:before{
    content: "";
    pointer-events:none;
    position: absolute;
    background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    top: 0px;
    bottom: 0%;
    z-index: -1;
}

Vous pouvez aussi déclarer une classe depuis les styles du site ou de la page afin de l…

Appliquez des formes à vos vignettes

Vous pouvez "découper" votre vignette avec par exemple un masque SVG via la propriété mask-image. Insérez par exemple le code suivant dans les styles de vos vignettes.

mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1182 1301' role='img' aria-hidden='true'%3E%3Cpath d='M969.797 10.15c44.464 1.46 89.04 3.08 133.38-.633 33.753-2.827 62.832-12.09 72.6 23.795 10.194 37.45-.523 89.883 1.18 129.345l4.72 171.272c2.347 197.53-8.84 394.9-9.523 592.448l.836 203.07c.565 47.22 24.16 132.67-40.54 140.27-15.618 1.834-31.38-.25-47.056-1.…

Ajoutez des décorations

Vous pouvez ajouter n'importe quelle forme pour décorer vos vignettes via un SVG et la propriété mask-image. Insérez par exemple le code suivant dans les styles de vos vignettes.

--quoteShape:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg%3E%3Cg%3E%3Cpath d='M96.6,29.5C51.9,49.8,10,97.9,10,160.1c0,38.4,24.4,66.3,54.4,66.3c31.4,0,47.5-23.7,47.5-45.4c0-25.1-17.5-44.7-43.3-44.7c-7.7,0-15.4,2.1-19.6,5.6c0-30.7,24.4-67,62.1-85.9L96.6,29.5z M230.6,29.5c-44.7,20.2-87.3,68.4-87.3,130.6c0,38.4,25.1,66.3,55.1,66.3c31.4,0,47.5-23.7,47.5-45.4…

Retirer l'effet flou sur le bas de la page

1. Appuyez sur site

site puis Styles personnalisés (avancé) et ajoutez le code CSS suivant :

/* retrait de l'effet flou en pied de page */
.botbar::before{
  backdrop-filter: none!important;
  mask-image: none!important;
  -webkit-backdrop-filter: none!important;
  -webkit-mask-image: none!important;  
}

fonctionnalités courantes

afficher un écran d'accueil temporaire

Ajouter vos réseaux sociaux dans le menu